<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue</title>
</head>

<body>
    <div id="app">
        <h1>1.Hello World(Mustache语法):</h1>
        <p>{{message}}</p>
        <span :title="message"><!-- v-bind:title 可以缩写成 :title -->
            鼠标移动上来就能看到title了！
        </span>
        <hr style="width: 100%;height: 2px;border: none;border-top: 2px dashed #000;">
        <h1>2.条件与循环</h1>
        <p v-if="showIf">显示与隐藏</p>
        <ol>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ol>
        <hr style="width: 100%;height: 2px;border: none;border-top: 2px dashed #000;">
        <h1>3.处理用户输入</h1>
        <p>{{message}}</p>
        <p v-once>此值插入后不会被改变：{{message}}</p>
        <input type="text" v-model="message" name="">
        <button @click="reverseMessage">Reverse Message</button>
        <!-- v-on:click 可以缩写成 @click-->
        <hr style="width: 100%;height: 2px;border: none;border-top: 2px dashed #000;">
        <h1>4.纯 HTML</h1>
        <div v-html="htmlMessage">
        </div>
        <hr style="width: 100%;height: 2px;border: none;border-top: 2px dashed #000;">
        <h1>5.属性</h1>
        <p>Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令：</p>
        <button @click="reverseMessage" v-bind:id="reverseBtnId" v-bind:disabled="reverseBtnDisabled">Reverse Message</button>
        <hr style="width: 100%;height: 2px;border: none;border-top: 2px dashed #000;">
        <h1>6.使用 JavaScript 表达式</h1>
        <p v-bind:id="'p-' + reverseBtnId">{{ message.split('').reverse().join('') }}</p>
        <hr style="width: 100%;height: 2px;border: none;border-top: 2px dashed #000;">
        <h1>7.过滤器（过滤器函数总接受表达式的值作为第一个参数）</h1>
        <p>{{ message | capitalize | reverse(reverse) }}</p>
        <hr style="width: 100%;height: 2px;border: none;border-top: 2px dashed #000;">
        <h1>8.修饰符</h1>
        <p>修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。例如，.prevent 装饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：</p>
        <div style="background-color: #ccc;">
            {{modifiersHTML}}
        </div>
    </div>
    <script type="text/javascript" src="../lib/vue.js"></script>
    <script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            message: "hello world",
            showIf: true,
            todos: [{
                'text': 'HTML5'
            }, {
                'text': 'CSS3'
            }, {
                'text': 'Vue.js'
            }],
            htmlMessage: '<p>Vue</p><h2>Vue</h2>',
            reverseBtnId: 'btn1',
            reverseBtnDisabled: true,
            reverse:true,
            modifiersHTML:'<button @click.prevent="reverseMessage">Reverse Message</button>\n\n<form v-on:submit.prevent="onSubmit"></form>'
        },
        methods: {
            reverseMessage: function() {
                this.message = this.message.split('').reverse().join('')
            },
        },
        filters: {
            capitalize: function(value) {
                if (!value) return ''
                value = value.toString()
                return value.charAt(0).toUpperCase() + value.slice(1)
            },
            reverse:function(value,isReverse){
                if(isReverse) return value.split('').reverse().join('')
                else return value
            }
        }
    })
    </script>
</body>

</html>
